<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
	</head>
	<style>
		.button{
			background-color: #2d8cf0;
			outline: 0px;
			border: none;
			color:white;
			font-size: 14px;
			padding: 12px;
			display: block;
			text-align: center;
			justify-content: center; /**水平居中对齐**/
			align-items: center; /**垂直居中对齐**/
			margin: 10px;
			border-radius: 5px;
			width: 100px;
			box-sizing: border-box; /*标准盒模型，使用于a标签这种被弄成盒模型的元素*/
			user-select: none; /*文本不允许选中*/
		}
		.button:focus{
			background-color: rgb(102, 177, 255);
		}
		.button:hover{
			background-color: rgb(102, 177, 255);
		}
	</style>
	<body>
		<button class="button">按钮</button>
		<a class="button">按钮</a>
	</body>
</html>